<template>
  <a-row>
    <a-col span="4">

      <a-card :bordered="true" :bodyStyle="{padding:'0'}">
        <a-row style="margin: 10px 10px 10px 10px">
          <a-input-search placeholder="搜索 手机号/姓名/订单号" v-model="queryParam.keyWord" enter-button   @search="onSearch"/>
        </a-row>
        <a-tabs :defaultActiveKey="orderStatus" style="width:96%;" @change="callbackByTabs">
          <a-tab-pane key="0" tab="待支付">
          </a-tab-pane>
          <a-tab-pane key="1" tab="待确认">
          </a-tab-pane>
          <a-tab-pane key="2,3" tab="进行中" force-render>
          </a-tab-pane>
          <a-tab-pane key="4" tab="已完成" force-render>
          </a-tab-pane>
          <a-tab-pane key="5" tab="已退单" force-render>
          </a-tab-pane>
          <a-tab-pane key="" tab="全部">
          </a-tab-pane>
        </a-tabs>
        <div style="overflow-y: scroll;">
          <a-row style="height: 800px;">
            <a-list item-layout="horizontal" :data-source="orderDataSource">
              <div
                v-if="showLoadingMore"
                slot="loadMore"
                :style="{ textAlign: 'center', marginTop: '12px',marginBottom:'12px', height: '32px', lineHeight: '32px' }"
              >
                <a-spin v-if="loadingMore" />
                <a-button @click="onLoadMore" style="margin-bottom: 12px">
                  加载更多
                </a-button>
              </div>
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-card :bodyStyle="chooseId==item.id?bodyStyle1:bodyStyle0" :bordered="false" style="width:96%"
                        @click="handleChoosePatient(item)">
                  <a-row style="margin: 10px 10px 5px 20px">
                    <a-col span="12">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;'">{{ item.memberName
                        }}</label>
                    </a-col>
                    <a-col span="12" align="right">
                      <label
                        :style="chooseId==item.id?'margin-left: 14px;margin-right: 2px;color:white':'margin-left: 10px;margin-right: 2px;color:#4da0ff'">
                        ￥{{ item.consumeAmount }}
                      </label>
                    </a-col>
                  </a-row>
                  <a-row style="margin: 0px 10px 20px 20px">
                    <a-col span="12">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;color:#959393'">数量{{ item.qty
                        }}</label>
                    </a-col>
                    <a-col span="12" align="right">
                      <label
                        :style="chooseId==item.id?'font-weight: bold;color:white':'font-weight: bold;color:#959393'">{{ item.orderTypeText }}</label>
                    </a-col>
                  </a-row>
                </a-card>
              </a-list-item>
            </a-list>
          </a-row>
        </div>
      </a-card>

    </a-col>
    <a-col span="16">
      <a-card :bordered="false" :bodyStyle="{padding:'0'}">

        <a-row style="height: 916px;padding: 10px 30px 10px 30px;overflow-y: scroll; ">
          <a-card :bodyStyle="{padding:'0'}" :bordered="false">
            <a-popconfirm title="是否确认订单信息?" ok-text="是" cancel-text="否" slot="extra" @confirm="() => handleSure()"
                          v-if="model.orderStatus=='1'&&model.payStatus=='3'">
              <a-button type="primary">确认审核</a-button>
            </a-popconfirm>

            <a-popconfirm title="是否确认申请退款?" ok-text="是" cancel-text="否" slot="extra" @confirm="() => handleRefund()"
                          v-if="model.payStatus=='3'&&(model.orderStatus=='1'||model.orderStatus=='2'||model.orderStatus=='3')"
                          style="margin-left: 10px" >
              <a-button type="primary">申请退款</a-button>
            </a-popconfirm>

            <a-button slot="extra" style="margin-left: 10px" type="primary" @click="handleDelivery()"
                      v-if="model.orderStatus=='2'">发货
            </a-button>
          </a-card>
          <a-row style="margin-bottom: 50px;margin-top: 20px">
            <a-steps :current="model.orderStatus*1">
              <a-step title="待支付" />
              <a-step title="待接单" />
              <a-step title="已接单" />
              <a-step title="进行中" />
              <a-step title="已完成" />
              <a-step title="已退单" />
            </a-steps>
          </a-row>
          <a-descriptions title="基本信息" bordered :column="3">
            <a-descriptions-item label="客户名称">
              {{ model.memberName }}
            </a-descriptions-item>
            <a-descriptions-item label="订单类型">
              {{ model.orderTypeText }}
            </a-descriptions-item>
            <a-descriptions-item label="下单时间">
              {{ model.orderTime }}
            </a-descriptions-item>

            <a-descriptions-item label="订单来源">
              {{ model.orderSource == '10' ? '微信小程序' : 'APP端' }}
            </a-descriptions-item>
            <a-descriptions-item label="订单原金额 (元)">
              ￥{{ model.originalPrice }}
            </a-descriptions-item>
            <a-descriptions-item label="实付款金额 (元)">
              ￥{{ model.consumeAmount }}
            </a-descriptions-item>
            <a-descriptions-item label="订单号">
              {{ model.orderNo }}
            </a-descriptions-item>
            <a-descriptions-item label="报告编码" v-if="model.orderType=='1'">
              {{ model.busCode }}
            </a-descriptions-item>
          </a-descriptions>

          <a-descriptions title="付款信息" bordered style="margin-top: 30px">
            <a-descriptions-item label="应付款金额">
              ￥{{ model.consumeAmount }}
            </a-descriptions-item>
            <a-descriptions-item label="支付方式">
              {{ model.payType == '1' ? '现金' : '微信' }}
            </a-descriptions-item>
            <a-descriptions-item label="支付流水号">
              {{ model.payTrxNo }}
            </a-descriptions-item>
            <a-descriptions-item label="付款状态">
              <a-tag color="blue" v-if="model.payStatus=='3'">
                {{ model.payStatus_dictText }}
              </a-tag>
              <a-tag color="red" v-if="model.payStatus=='1'||model.payStatus=='2'||model.payStatus=='4'||model.payStatus=='8'">
                {{ model.payStatus_dictText }}
              </a-tag>
              <a-tag color="blue" v-if="model.payStatus=='5'||model.payStatus=='6'||model.payStatus=='7'">
                {{ model.payStatus_dictText }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="付款完成时间">
              {{ model.payFinishTime }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions title="收货人信息" bordered style="margin-top: 30px" v-if="addrModel">
            <a-descriptions-item label="收货人名称">
              {{ addrModel.name }}
            </a-descriptions-item>
            <a-descriptions-item label="收货人地址">
              {{ addrModel.address }}
            </a-descriptions-item>
          </a-descriptions>

          <a-descriptions title="商品信息" bordered style="margin-top: 30px"></a-descriptions>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource">
            <template slot="imgSlot" slot-scope="text">
              <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
              <img v-else :src="getImgView(text)" height="25px" alt=""
                   style="max-width:80px;font-size: 12px;font-style: italic;" />
            </template>
          </a-table>
        </a-row>
      </a-card>
    </a-col>
    <a-col span="4">
      <a-card :bordered="false" title="购买记录" :bodyStyle="{padding:'0'}">
        <a-row style="height: 860px;padding: 0px 10px 0px 10px ">
          <div style="overflow-y: scroll;height: 860px;">
            <a-collapse v-if="historyDataSource.length>0">
              <a-collapse-panel :key="data.id" :header="data.orderTypeText" v-for="data in historyDataSource">
                <label slot="extra" type="setting" style="margin-left: 10px;color: #8a8a8a">{{ data.orderDay }}</label>
                <div style="font-weight: 500;color: #8a8a8a">数量：{{ data.qty }}</div>
                <div style="font-weight: 500;color: #8a8a8a;margin-top: 3px">时间：{{ data.orderTime }}</div>
                <div style="font-weight: 500;color: #8a8a8a;margin-top: 3px">描述：{{ data.desc }}</div>
              </a-collapse-panel>
            </a-collapse>
          </div>

        </a-row>
      </a-card>
    </a-col>
    <store-order-delivery-modal ref="modalDelivery" @ok="modalFormOk"></store-order-delivery-modal>
  </a-row>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import { filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import { deleteAction, getAction, httpAction, postAction } from '@api/manage'
import moment from 'moment'
import StoreOrderDeliveryModal from './modules/HOrderDeliveryModal'

export default {
  name: '门诊',
  mixins: [mixinDevice, JeecgListMixin],
  components: {
    JDictSelectTag,
    StoreOrderDeliveryModal
  },
  data() {
    return {
      description: '订单页面',
      disableMixinCreated: true,
      cpCategoryList: [],
      visible: false,
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      bodyStyle0: { padding: '0', height: '65px', borderRadius: '8px', marginLeft: '2%' },
      bodyStyle1: { padding: '0', height: '65px', borderRadius: '8px', marginLeft: '2%', background: '#69c966' },
      chooseId: 0,
      url: {
        list: '/store/order/shop/list',
        listGoods: '/store/order/goods',
        getAddress: '/store/order/address',
        listHistory: '/store/order/history/list',
        sure: '/store/order/sure',
        refund: '/store/order/refund',
        get: '/store/order'
      },
      pageNo: 1,
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      orderDataSource: [],
      historyDataSource: [],
      model: {
        deliverSource: ''
      },
      addrModel: {},
      // 表头
      columns: [
        {
          title: '商品类型',
          align: 'center',
          dataIndex: 'goodsType',
          width: 150,
          customRender: function(t, r, index) {
            //1一体机食谱 2一体机运动方案 3一体机整套方案
            if (t == '1') {
              return '食谱方案'
            } else if (t == '2') {
              return '运动方案'
            } else if (t == '3') {
              return '整套方案'
            }
            return '商城'
          }
        },
        {
          title: '商品名称',
          align: 'center',
          dataIndex: 'goodsName',
          width: 200
        },
        {
          title: '商品图片',
          align: 'center',
          dataIndex: 'goodsImg',
          width: 180,
          scopedSlots: { customRender: 'imgSlot' }
        },
        {
          title: '商品单价',
          align: 'center',
          dataIndex: 'goodsPrice',
          width: 100
        },
        {
          title: '购买数量',
          align: 'center',
          dataIndex: 'totalNum',
          width: 100
        },
        {
          title: '商品总价(元)',
          align: 'center',
          dataIndex: 'totalPrice',
          width: 110
        },
        {
          title: '商品实付总价(元)',
          align: 'center',
          dataIndex: 'totalPayPrice',
          width: 110
        }
      ],
      orderStatus: '1'
    }
  },
  created() {
    this.getData(true, this.orderStatus)
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    moment,
    handleChoosePatient(item) {
      if (this.chooseId == item.id) {
        this.chooseId = 0
        return
      }
      this.chooseId = item.id
      this.getGoods(item)
    },
    onLoadMore() {
      this.loadingMore = true
      this.showLoadingMore = false
      this.getData(false)
    },
    getData(isRefresh, orderStatus) {
      const that = this
      if (isRefresh) {
        that.pageNo = 1
      }
      that.queryParam.pageNo = this.pageNo
      that.queryParam.orderStatus = orderStatus
      that.queryParam.pageSize = 20
      getAction(that.url.list, that.queryParam).then((res) => {
        if (res.success) {
          that.orderDataSource = res.result.records
          if (that.orderDataSource && that.orderDataSource.length > 0 && isRefresh) {
            that.getGoods(that.orderDataSource[0])
          }
          if (res.result.totalPages > res.result.pageNo) {
            that.showLoadingMore = true
            that.pageNo++
          } else {
            that.showLoadingMore = false
          }
        }
      }).finally(() => {
        this.loadingMore = false
      })
    },
    getGoods(record) {
      const that = this
      that.chooseId = record.id
      that.model = record
      getAction(this.url.listGoods + '/' + record.orderNo).then((res) => {
        if (res.success) {
          that.dataSource = res.result
        }
      })

      getAction(this.url.getAddress + '/' + record.orderNo).then((res) => {
        if (res.success) {
          that.addrModel = res.result
        }
      })
      this.getzHistoryData(that.model.memberId)
    },
    getzHistoryData(memberId) {
      const that = this
      getAction(that.url.listHistory, { 'pageNo': 1, 'pageSize': 30, 'memberId': memberId }).then((res) => {
        if (res.success) {
          that.historyDataSource = res.result.records
        }
      }).finally(() => {

      })
    },
    handleSure() {
      const that = this
      postAction(this.url.sure, { id: that.chooseId }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.handleRefresh(that.chooseId)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    handleRefund() {
      const that = this
      postAction(this.url.refund, { id: that.chooseId }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.handleRefresh(that.chooseId)
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.confirmLoading = false
      })
    },
    handleDelivery: function() {
      this.$refs.modalDelivery.edit(this.model)
      this.$refs.modalDelivery.title = '发货'
      this.$refs.modalDelivery.disableSubmit = false
    },
    handleRefresh(id) {
      const that = this
      getAction(that.url.get + '/' + id).then((res) => {
        if (res.success) {
          that.model = res.result
        }
      }).finally(() => {

      })
    },
    modalFormOk() {
      this.handleRefresh(this.chooseId)
    },
    callbackByTabs(key) {
      this.orderStatus=key;
      this.getData(true, key)
    },
    onSearch(){
      this.getData(true, this.orderStatus)
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';


.ant-descriptions-row .ant-descriptions-item-label {
  width: 200px;
}
</style>
